<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <!--需要引入jQuery为Axios服务-->
<!--    <script src="../js/jquery-1.11.1.js"></script>-->
    <script src="../js/axios.js"></script>
</head>
<body>
<center>
    <div id="app">
        <p style="color: red">{{msg}}</p>
        <div>
            <table border="1" cellpadding="0" cellspacing="0">
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
                <tr v-for="user in userList">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>
                        <a href="javascript:;" @click="findUserById(user.id)">修改</a>
                        <a href="javascript:;" @click="deleteRow(user.id)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
        <br><br>
        <div>
            用户添加
            <form method="post">
                姓名:<input type="text" v-model="user.name"><br>
                年龄:<input type="text" v-model="user.age"><br>
            </form>
            <button value="" @click="addUser">保存用户信息</button>
        </div>
        <br><br>
        <div>
            用户信息修改
            <form method="post">
                <input type="text" v-model="userUpdate.id" style="display: none">
                姓名:<input type="text" v-model="userUpdate.name"><br>
                年龄:<input type="text" v-model="userUpdate.age"><br>
            </form>
            <button  @click="updateUser()">保存用户信息</button>
        </div>
    </div>
</center>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: [],
            user: {},
            userUpdate: {},
            msg:''
        },
        created:function () {
            this.findAll();
        },
        methods:{
            findAll(){
                let url="http://localhost:8080/SpringBoot/user/findAll";
                let _this=this;
                axios.get(url).then(function (response) {
                    if(response.data.success==true){
                        _this.userList=response.data.results;
                    }else {
                        _this.msg=response.data.msg;
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            },
            findUserById(id){
                let url="http://localhost:8080/SpringBoot/user/findUserById";
                let _this=this;
                axios.get(url,{params:{id:id}}).then(function (response) {
                    if(response.data.success==true){
                        _this.userUpdate=response.data.results;
                    }
                    _this.msg=response.data.msg;
                }).catch(function (error) {
                    console.log(error);
                })
            },
            addUser(){
                let url="http://localhost:8080/SpringBoot/user/addUser";
                let _this=this;
                axios.post(url,_this.user).then(function (response) {
                    if(response.data.success==true){
                        _this.findAll();
                        _this.user={};
                    }
                    _this.msg=response.data.msg;
                }).catch(function (error) {
                    console.log(error);
                })
            },
            updateUser(){
                // alert("sb")
                let url="http://localhost:8080/SpringBoot/user/updateUser";
                let _this=this;
                axios.post(url,_this.userUpdate).then(function (response) {
                    if(response.data.success==true){
                        _this.findAll();
                        _this.userUpdate={};
                    }
                    _this.msg=response.data.msg;
                }).catch(function (error) {
                    console.log(error);
                })
            },
            deleteRow(id){
                let url="http://localhost:8080/SpringBoot/user/deleteUser";
                let _this=this;
                axios.get(url,{params:{id:id}}).then(function (response) {
                    if(response.data.success==true){
                        _this.findAll();
                    }
                    _this.msg=response.data.msg;
                }).catch(function (error) {
                    console.log(error);
                })
            }
        }
    })
</script>
</body>
</html>